<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="leftCard" style>
      <div class="manageBtn" style>
        <CButton
          title="添加节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="addTreeNode"
          data-permission="Btn_yingxiang_TreeAdd"
        >
          添加节点
        </CButton>

        <CButton
          title="编辑部门节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="updateTreeNode"
          data-permission="Btn_yingxiang_TreeBianji"
        >
          编辑节点
        </CButton>

        <CButton
          title="删除节点"
          variant="outline"
          class="headTextBtnStyle system-btn-style"
          @click="delTreeNode"
          data-permission="Btn_yingxiang_TreeDelet"
        >
          删除节点
        </CButton>
      </div>
      <div class="imageControl-treeDiv">
        <ul id="imageControlTree" class="ztree customStyleZtree"></ul>
      </div>
    </CCard>

    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">{{ name }}列表</span>
        </div>
        <div class="header-right-wraper">
          <CButton color="info" @click="addCatalog" class="system-btn-style" data-permission="Btn_yingxiang_btnAdd">
            <CIcon name="cil-plus" />&nbsp;控制影像
          </CButton>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <TableList
            ref="table"
            :getColumn="getColumns"
            :getAxios="getAxios"
            :dataList.sync="dataList"
          >
            <template v-slot:show_details="item">
              <CButton
                title="查看"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="look(item.data.row)"
                >查看</CButton
              >
              <CButton
                title="编辑"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="update(item.data.row)"
                data-permission="Btn_yingxiang_btnXiugai"
                >编辑</CButton
              >
              <CButton
                title="删除"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="del(item.data.row.id)"
                data-permission="Btn_yingxiang_btnDelet"
                >删除</CButton
              >
            </template>
          </TableList>
        </div>
      </CCardBody>

      <!--   <CDataTable :items="data" :fields="fields" hover border>
            <template #show_details="{ item }">
              <td class="py-2" align="center">
                <CButton
                  title="查看"
                  variant="outline"
                  class="textBtnStyle"
                  @click="look(item)"
                >
                  查看
                </CButton>
                <CButton
                  title="编辑"
                  variant="outline"
                  class="textBtnStyle"
                  @click="update(item)"
                >
                  编辑
                </CButton>
                <CButton
                  title="删除"
                  variant="outline"
                  class="textBtnStyle"
                  @click="del(item.id)"
                >
                  删除
                </CButton>
              </td>
            </template>
          </CDataTable>
      </CCardBody>
      <CCardFooter class="pageLink">
        <CRow>
          <CCol class="footerPage" style>
            <span class="pageContent">
              每页
              <CSelect
                @change="getVendorId($event)"
                :options="[10, 15, 20, 25]"
                v-model="pageSize"
                class="selectStyle"
                style
              />
              条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                this.allNum
              }}条记录)
            </span>
            <CPagination
              :activePage.sync="currentPage"
              :pages="total"
              align="end"
              v-if="total != 0"
            />
          </CCol>
        </CRow>
      </CCardFooter>-->
    </CCard>



    <Modal
      v-model="addNodeShow"
      draggable
      scrollable
      title="新建节点"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">新建节点</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="节点名称"
              placeholder="请输入节点名称"
              horizontal
              v-model="addData.name"
            />
            <CInput
              label="节点编码"
              placeholder="请输入节点编码"
              horizontal
              v-model="addData.code"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addNodeCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk('node')" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!--更新部门-->
    <Modal
      v-model="updateOrgShow"
      title="更新部门"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">更新名称</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="节点名称"
              placeholder="请输入节点名称"
              horizontal
              v-model="orgData.name"
            />
            <CInput
              disabled
              label="节点编码"
              placeholder="请输入节点编码"
              horizontal
              v-model="orgData.code"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateOrgCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOrgOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="delNodeShow"
      draggable
      scrollable
      title="删除节点"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除节点</span>
      </p>
      <div class="modalBody">
        <p>删除节点时与节点相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delNodeCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk('node')" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除控制影像"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除控制影像</span>
      </p>
      <div class="modalBody">
        <p>删除控制影像时与控制影像相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="addShow"
      draggable
      scrollable
      title="新建控制影像"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">新建控制影像</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="控制影像名称"
              placeholder="请输入控制影像名称"
              horizontal
              v-model="addData.name"
            />
            <CInput
              label="控制影像编码"
              placeholder="请输入控制影像编码"
              horizontal
              v-model="addData.code"
            />
            <div>
              <CInput
                label="控制影像路径"
                placeholder="请输入控制影像路径"
                horizontal
                v-model="addData.path"
                clearable
                autocomplete="off"
                class="inputTd"
              />
              <CButton
                color="info"
                size="sm"
                @click="browserFile()"
                class="btnBrowser system-btn-style"
                >...
              </CButton>
            </div>
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk()" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>



    <Modal
      v-model="updateShow"
      draggable
      scrollable
      title="更新控制影像"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">更新控制影像</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="控制影像名称"
              placeholder="请输入控制影像名称"
              horizontal
              v-model="upData.name"
            />
            <CInput
              label="控制影像编码"
              placeholder="请输入控制影像编码"
              horizontal
              v-model="upData.code"
              disabled
            />
            <!-- <CInput
              label="控制影像路径"
              placeholder="请输入控制影像路径"
              horizontal
              v-model="upData.path"
            /> -->
            <div>
              <CInput
                label="控制影像路径"
                placeholder="请输入控制影像路径"
                horizontal
                v-model="upData.path"
                clearable
                autocomplete="off"
                class="inputTd"
              />
              <CButton
                color="info"
                size="sm"
                @click="browserFile()"
                class="btnBrowser system-btn-style"
                >...
              </CButton>
            </div>
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="getShow"
      draggable
      scrollable
      title="查看控制影像"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">查看控制影像</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="控制影像名称"
              placeholder="请输入控制影像名称"
              horizontal
              v-model="getData.name"
              readonly
            />
            <CInput
              label="控制影像编码"
              placeholder="请输入控制影像编码"
              horizontal
              v-model="getData.code"
              readonly
            />
            <CInput
              label="控制影像路径"
              placeholder="请输入控制影像路径"
              horizontal
              v-model="getData.path"
              readonly
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="getCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="getOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <file-catalog
      ref="refFileCatalogModal"
      v-if="fileCatalogModal"
      :modalShow="fileCatalogModal"
      @closed="fileCatalogModalClose"
      @menuOk="fileCatalogModalOk"
    ></file-catalog>
  </div>
</template>

<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:80px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "名称",
    key: "name",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "编码",
    key: "code",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "路径",
    key: "path",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    key: "show_details",
    label: "操作",
    _style: "width:240px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import TableList from "@/template/table/TableList";
import FileCatalog from "@/views/jobProcess/fileCatalog.vue";

export default {
  name: "imageControlManage",
  components: { TableList, FileCatalog },
  data() {
    return {
      dataList: [],
      fileCatalogModal: false,
      //修改节点名称
      updateOrgShow: false,
      orgData: {
        code: "",
        name: "",
      },
      //
      modalStyle: { top: "340px" },
      selectactionId: 0,
      addNodeShow: false,
      delNodeShow: false,
      delShow: false,
      updateShow: false,
      addShow: false,
      getShow: false,
      loading: true,
      data: [],
      fields,
      clickId: -1,
      selectId: -1,
      currentPage: 1,
      pages: 0,
      total: 0,
      allNum: 0,
      select: "processmodel",
      pageSize: 15,
      imageControlTreeData: [],
      currentNodeId: 0,
      currentNode: {},
      name: "",
      getData: "",
      addData: {
        code: "",
        name: "",
        path: [],
        pId: "",
      },
      upData: {
        code: "",
        name: "",
        path: [],
        pId: "",
      },

      getColumns: [
        {
          title: "名称",
          key: "name",
          className: "centerText",
        },
        {
          title: "编码",
          key: "code",
          className: "centerText",
        },
        {
          title: "路径",
          key: "path",
          className: "centerText",
        },
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          className: "centerText",
          width: 220,
        },
      ],
      getAxios: {
        url: this.$api.manageApi.getAllControlImage, //请求路径
        method: "get", //请求方式
        dataList: { pId: 22 }, //请求参数
      },
    };
  },
  mounted() {
    this.getImageControlTree();
    // this.getImageControlByPId(0);
  },
  methods: {
    browserFile() {
      let _this = this;
      this.fileCatalogModal = true;
      let extensions = "";
      if (_this.currentNode.code === "base_index_select") {
        extensions = "*.ind";
      } else {
        extensions = "*.img;*.tif;*.tiff";
      }

      this.$nextTick(() => {
        _this.$refs.refFileCatalogModal.initFileTree(
          {
            type: { name: "file", plural: false },
            constraint: {
              extensions: extensions,
            },
          },
          false
        );
      });
    },


    fileCatalogModalOk(data) {
      debugger
      let path = data ? data.split(/,|;|#TASK#|#HT#/).join(",") : [];
      this.addData.path = path;
      this.upData.path = path;
      this.fileCatalogModal = false;
    },


    fileCatalogModalClose() {
      this.fileCatalogModal = false;
    },

    //编辑节点
    updateTreeNode() {
      /*let treeObj = $.fn.zTree.getZTreeObj("imageControlTree");
      this.orgData.name = treeObj.getSelectedNodes()[0].name;
      this.orgData.code = treeObj.getSelectedNodes()[0].code;*/

      if (JSON.stringify(this.currentNode) !== "{}") {
        this.orgData.name = this.currentNode.name;
        this.orgData.code = this.currentNode.code;
      }
      this.updateOrgShow = true;
    },
    //取消
    updateOrgCancel() {
      this.updateOrgShow = false;
    },
    // 確定
    updateOrgOk() {
      let self = this;
      let path = this.$api.manageApi.updateName + this.currentNode.id;
      let param = {
        id: this.currentNode.id,
        code: this.currentNode.code,
        pId: this.currentNode.pId,
        path: this.currentNode.path,
        name: this.orgData.name,
      };

      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          self.getImageControlTree();
          this.$Message.success("修改成功");
        } else {
          this.$Message.error("修改失败");
        }
        this.updateOrgShow = false;
      });
      this.orgData = {
        code: "",
        name: "",
      };
    },

    /**
     * 获取每页对应的value值，并转为数值型
     */
    getVendorId(event) {
      let tempdata = event.target.value;
      this.pageSize = parseInt(tempdata);
    },
    /**
     * 点击查看按钮，显示弹窗，获取id和val值
     */
    look(val) {
      this.getShow = true;
      this.getData = val;
    },
    /**
     * 点击编辑按钮，显示弹窗，获取id和val值
     */
    update(val) {
      this.updateShow = true;
      this.clickId = val.id;
      this.upData = JSON.parse(JSON.stringify(val)); //deep copy
    },
    /**
     * 点击删除按钮，显示弹窗，获取id值
     */
    del(id) {
      this.delShow = true;
      this.clickId = id;
    },
    /**
     * 点击删除树节点按钮，显示弹窗，获取此id值
     */
    delTreeNode() {
      this.delNodeShow = true;
      let treeObj = $.fn.zTree.getZTreeObj("imageControlTree");
      this.clickId = treeObj.getSelectedNodes()[0].id;
    },
    /**
     * 点击增加任务类型按钮，显示弹窗
     */
    addCatalog() {
      this.addShow = true;
    },
    delOk(type) {
      let self = this;
      if (type === "node") {
        this.delNodeShow = false;
      } else {
        this.delShow = false;
      }

      if (self.clickId == "" || self.clickId == null) {
        this.$Message.warning("请先选择要删除的数据");
        return;
      }
      if (self.clickId == "0") {
        this.$Message.warning("不能删除根节点");
        return;
      }

      let path = this.$api.manageApi.controlImageDelete + self.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          if (type === "node") {
            self.getImageControlTree();
          }
          self.getImageControlByPId(self.selectId);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    delCancel() {
      this.delShow = false;
    },

    delNodeCancel() {
      this.delNodeShow = false;
    },

    addTreeNode() {
      this.addNodeShow = true;
    },

    addOk(type) {
      let self = this;
      let path = this.$api.manageApi.controlImageCreate;


      if (
              !self.addData.name ||
              !self.addData.code ||
             ( self.addData.path.length < 1 && type !== "node")
      ) {
        this.$Message.warning("请填写完整");
        return;
      }

      if (
        self.addData.code.indexOf("/") != -1 ||
        self.addData.code.indexOf("\\") != -1
      ) {
        this.$Message.warning("编码不能包含斜杠");
        return;
      }
      if (self.addData.path.length) {
        self.addData.path = this.dealwithPath(self.addData.path);
      }
      if (self.selectId == -1 || type === "node") {
        self.addData.pId = 0;
      } else {
        self.addData.pId = self.selectId;
      }
      let param = self.addData;
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getImageControlByPId(self.currentNodeId);

          if (type === "node") {
            self.getImageControlTree();
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });

      if (type === "node") {
        this.addNodeShow = false;
      } else {
        this.addShow = false;
      }

      self.addData = {
        code: "",
        name: "",
        path: [],
        pId: "",
      };
    },
    // 处理路径的格式 都是数组格式 其中base_index_select类型只能有一个值，默认取第一个
    dealwithPath(path) {
      let result = [];
      let arr = path ? path.split(/,|;|#TASK#|#HT#/) : []; //避免手动输入的路径，再做一次调整
      if (
        path &&
        arr.length > 0 &&
        this.currentNode.code === "base_index_select"
      ) {
        result.push(arr[0]);
      } else {
        result = arr;
      }
      return result;
    },
    addCancel() {
      this.addShow = false;
    },

    addNodeOk() {
      this.addNodeShow = false;
    },
    addNodeCancel() {
      this.addNodeShow = false;
    },

    updateOk(type) {
      let self = this;
      let path = this.$api.manageApi.updateName + self.clickId;
      if (
        !self.upData.name ||
        !self.upData.code ||
        self.upData.path.length < 1
      ) {
        this.$Message.warning("请填写完整");
        return;
      }
      if (
        self.addData.code.indexOf("/") != -1 ||
        self.addData.code.indexOf("\\") != -1
      ) {
        this.$Message.warning("编码不能包含斜杠");
        return;
      }
      self.upData.path = this.dealwithPath(self.upData.path);
      console.log(JSON.stringify(self.upData.path));
      let param = self.upData;
      this.http.post(path, param).then((res) => {
        this.updateShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getImageControlByPId(self.currentNodeId);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    updateCancel() {
      this.updateShow = false;
    },
    getOk() {
      this.getShow = false;
    },
    getCancel() {
      this.getShow = false;
    },
    getImageControlTree() {
      let self = this;
      self.imageControlTreeData = [];
      let path = this.$api.manageApi.getRoot;

      this.http.get(path).then((res) => {
        self.loading = false;
        if (res.data.success) {
          self.imageControlTreeData = res.data.data;

          if (self.imageControlTreeData.length > 0) {
            self.name = self.imageControlTreeData[0].name;
            self.getImageControlByPId(self.imageControlTreeData[0].id);
          }

          let setting = {
            data: {
              simpleData: {
                enable: true,
              },
            },
            view: {
              showLine: false,
              showIcon: false,
              selectedMulti: false, //不可以多选
            },
            callback: {
              onClick: this.zTreeOnClick,
            },
          };

          $.fn.zTree.init(
            $("#imageControlTree"),
            setting,
            self.imageControlTreeData
          );
          let treeObj = $.fn.zTree.getZTreeObj("imageControlTree");
          var nodes = treeObj.getNodes();
          if (nodes.length > 0) {
            treeObj.selectNode(nodes[0]);
            self.currentNode = nodes[0];
            self.selectId = nodes[0].id;
            self.currentNodeId = nodes[0].id;
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    zTreeOnClick(event, treeId, treeNode) {
      let self = this;
      self.currentNode = treeNode;
      self.clickId = treeNode.id;
      if (self.selectId == treeNode.id) {
        let treeObj = $.fn.zTree.getZTreeObj("imageControlTree");
        let nodes = treeObj.getSelectedNodes();
        if (nodes.length > 0) {
          treeObj.cancelSelectedNode(nodes[0]);
          self.getImageControlByPId(treeNode.id);
          // self.selectId = -1;
        }
      } else {
        self.selectId = treeNode.id;
        self.currentNodeId = treeNode.id;
        self.name = treeNode.name;

        this.getImageControlByPId(self.currentNodeId);
      }
    },
    /**
     * 分页功能实现
     */
    getImageControlByPId(parentId) {
      let self = this;
      self.selectactionId = parentId;
      self.data = [];
      let path = self.$api.manageApi.getAllControlImage;
      let param = {
        pId: parentId,
        pageSize: this.pageSize,
        pageNum: self.currentPage,
      };
      let getAxiosData = {
        url: path,
      };
      self.$refs.table.getRefreshTable(param, getAxiosData);
      /* self.http.get(path, param).then((res) => {
        if (res.data.success == true) {
          self.data = res.data.data.dataList;
          self.allNum = res.data.data.total;
          self.total = Math.ceil(res.data.data.total / self.pageSize);
          for (let i = 0; i < self.data.length; i++) {
            self.data[i].number =
              (self.currentPage - 1) * self.pageSize + i + 1;
          }
        } else {
          self.$Message.error(res.data.message);
        }
      });*/
    },
  },
  watch: {
    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getImageControlByPId(this.selectactionId);
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getImageControlByPId(this.selectactionId);
    },

    dataList: {
      handler(val) {
        val.forEach((element) => {
          if (Array.isArray(element.path)) {
            element.path = element.path.join(";");
          }
        });
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style scoped>
.selectProLine-col {
  border-right: 1px solid #d8dbe0;
}
.col-md-2 {
  padding-right: 10px;
  padding-left: 20px;
}
.col-md-10 {
  padding-right: 20px;
  padding-left: 0px;
}
.manageBtn {
  border-bottom: 1px solid #d8d8d8;
  margin-top: 15px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-evenly;
}
::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
}
.dic_tree {
  max-width: 230px;
  overflow-y: auto;
  height: 100%;
}

/* 分页 */
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: black;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.productionLine-treeDiv-left {
  max-height: 500px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: -16px;
  margin-right: -16px;
}

.productionLine-treeDiv-right {
  max-height: 500px;
  overflow-x: auto;
  overflow-y: auto;
  margin-bottom: -16px;
  margin-right: -18px;
}

.userTitle {
  margin-bottom: 0 !important;
  margin-top: 5px;
}

/* .max-hight {
  -webkit-box-flex: 1;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
} */
/* .max-hight ::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
} */
.imageControlManage {
  height: 100%;
  overflow-y: auto;
}

.menmuStyle {
  height: 100%;
}
.imageControl-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}

.ztree {
  margin: 0;
  padding: 0;
}
.rightCard {
  width: 80%;
  margin-left: 10px;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}

/* .rightCard .max-hight {
  overflow-y: auto;
  height: calc(100% - 40px) !important;
  padding: 20px 20px 18px 20px !important;
} */

/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}
.onButton:hover {
  color: white;
}
/deep/ footer.page-link:hover {
  background-color: #ffffff;
}

.inputTd {
  float: left;
  width: 94.2%;
  margin: 0;
  margin-left: 2px;
}
</style>
